<template>
	<view class="contain" style="height:100%;">


		<view class="container">
			<view class="shopcart_content" v-for="(items,index) of cart_list" :key="index">
				<view class="shopName">
					<view class="select_btn" @tap = 'shopselect(index)'>
						{{items.shopSelect?'...':""}}
					</view>
					<view class="shopLog">
						<image :src="items.photo" mode=""></image>
					</view>
					<view class="name">
					{{items.shopName}}
					</view>
					<view class="uniicons" style="display: flex;align-items: center; ">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
				<view class="goods_list" v-for="(item,idx) of items.goodList" :key="idx">
					<view class="goods_column">
						<view class="select_btn" @tap = 'goodselect(index,idx)'>
						{{item.select?'...':""}}
						</view>
						<view class="goods_content">
							<view class="good_img">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="good_info">
								<view class="good_title">
									{{item.title}}
								</view>
								<view class="good_disc">
									
									{{item.sub_title}}
								</view>
							</view>
						</view>
					</view>

					<view class="price_cont">
						<view class="price">
							￥{{item.price}}
						</view>
						<view class="num_cont">
							<uni-icons style="" type="minus" size='30' color="#EAEAEA" @click="computBtn('-',index,idx)"></uni-icons>
							<text class="class_num">
								{{item.num}}
							</text>
							<uni-icons type="plus" size='30' color="#EAEAEA" @click="computBtn('+',index,idx)"></uni-icons>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="footer_btn">
			<view class="select_all">
				<view class="select_btn" @tap="isAll()">
					{{selectAll?'...':""}}
				</view>
				<text style="margin-left:14rpx">全选</text>
			</view>
			<view class="total_price">
				<view class="discount">
					优惠 0￥
				</view>
				<view class="total">
					总计：
					<text class="total_num">￥{{totalPrice}}</text>

				</view>
			</view>
			<view class="buy_btn">
				去下单
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				selectAll: false,
				cart_list: [{
					shopName: "富尔玛家居",
					shopSelect:false,
					photo:'../../static/icon/shop.png',
					goodList: [{
							"id": "01",
							"title": "商品2",
							"img":"../../static/image/test.png",
							"sub_title": "KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W",
							"price": 3444,
							"num": 3,
							"select": false
						},
						{
							"id": "02",
							"title": "商品3",
							"sub_title": "KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W",
							"price": 3444,
							"img":'../../static/image/test.png',
							"num": 0,
							"select": false
						},
					]
				},
				{
					shopName:"穷尔驴家具",
					shopSelect:false,
					photo:'../../static/icon/shop.png',
					goodList:[
						{
							"id":"03",
							"title":"商品4",
							"sub_title":"KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W",
							"price":3444,
							"img":"../../static/image/test.png",
							"num":0,
							"select":false
						},
						{
							"id":"04",
							"title":"商品5",
							"sub_title":"KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W",
							"price":3444,
							"img":"../../static/image/test.png",
							"num":0,
							"select":false
						},
					]
				}
				]
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			
			//购物车商品数量增加减少
			computBtn(cru, index,idx) {
				var num = this.cart_list[index].goodList[idx].num
				switch (cru) {
					case "+":
						num++;
						break;
					case "-":
						num--
						break;
				};
				//此处判断库存量
				if (num < 0 || num >= 10) {
					return
				}
				this.cart_list[index].goodList[idx].num = num
			},
			
			//商店内商品是否选择
			shopselect(index){			
				var shopselect = this.cart_list[index].shopSelect
				 this.cart_list[index].shopSelect =!shopselect
				this.cart_list[index].goodList.map((item,index)=>{
					item.select =!shopselect}) 
			},
			goodselect(index,idx){
				var shopselect = this.cart_list[index].goodList[idx].select
				 this.cart_list[index].goodList[idx].select = !shopselect
				 var num = 0
				this.cart_list[index].goodList.map((item,ind)=>{
					if(item.select){
						this.cart_list[index].shopSelect=true
					}else{
						num++
					}
					})
					if(num==this.cart_list[index].goodList.length){
						this.cart_list[index].shopSelect=false
					}
			},
			//购物车所有商品是否全选
			isAll() {
				var selectAll = this.selectAll;
				this.selectAll = !selectAll;
				this.cart_list.map((item,index)=>{
					item.shopSelect=!selectAll;
						item.goodList.map((items,idx)=>{
							items.select=!selectAll
						})
				})
			}
		},

		computed: {
			totalPrice() {
				var tol = 0;
				this.cart_list.map((item, index) => {
					item.goodList.map((items,idx)=>{
						if(items.select){
							tol+= items.price*items.num
						}
					})
				});
				return tol
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100%
	}

	.select_btn {
		background-color: none;
		height: 38rpx;
		width: 38rpx;
		border: 1px solid #CDCDCD;
		border-radius: 50%;
	}
	

	.contain {
		height: 100%;
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.nav_nap {
		background-color: #F9EF4C;
		height: 90rpx;
		width: 100%;
		display: flex;
		align-items: center;

		.nav_item {
			box-sizing: border-box;
			padding: 0 30rpx;
			border-right: 1px solid #BBA61A;
			font-size: 22rpx;
			color: #7B6A3A;

		}

		:nth-child(3) {
			border-right: none;
		}

		.nav_active {
			color: red;
		}

	}

	.container {
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding: 26rpx 30rpx;
		background: $backgroundPage;
		overflow: auto;

		.shopcart_content {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			align-items: space-between;
			justify-content: center;
			padding: 30rpx 27rpx 0;
			margin-bottom: 30rpx;
			.goods_list{
				margin-top: 40rpx;
				border-bottom: 1px solid #F1F1F1 ;
				padding-bottom: 20rpx;
				&:last-child{
					border: none;
				}
			}
			.shopName {
				display: flex;
				.shopLog {
					width: 38rpx;
					height: 38rpx;
					margin-left: 15rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-size: 30rpx;
					font-weight: 900;
					margin: 0 10rpx 0 20rpx;
					color: #333333;
				}
			}

			.goods_column {
				display: flex;
				width: 100%;
				align-items: center;

				.goods_content {
					box-sizing: border-box;
					flex: 1;
					height: 100%;
					display: flex;
					
					margin-left: 22rpx;

					.good_img {
						height: 160rpx;
						width: 160rpx;

						image {
							height: 100%;
							width: 100%;
						}
					}

					.good_info {
						display: flex;
						margin-left: 19rpx;
						flex: 1;
						flex-direction: column;

						.good_title {
							font-size: 22rpx;
							color: #333333;
							font-weight: 900;
						}

						.good_disc {
							margin-top: 19rpx;
							background-color: #F7F7F7;
							box-sizing: border-box;
							padding: 18rpx 20rpx 18rpx;
							font-size: 18rpx;
							line-height: 30rpx;
							color: #999999;
							border-radius: $base-radius;
						}
					}
				}
			}

			.price_cont {
				display: flex;
				width: 100%;
				margin-top: 30rpx;
				justify-content: flex-end;
				align-items: center;

				.price {
					margin-right: 118rpx;
					font-size: 32rpx;
					color: #F8321D;
				}

				.num_cont {
					display: flex;
					align-items: center;
					box-sizing: border-box;
					border: 1px solid #eaeaea;
					border-left: none;
					border-right: none;
					color: #999999;
					font-size: 30rpx;
					border-radius: 40rpx;

					.class_num {
						margin: 0 20rpx
					}

				}
			}

		}
	}

	.footer_btn {
		width: 100%;
		box-sizing: border-box;
		height: 80rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FBF8E4;

		.select_all {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #666666;

		}

		.total_price {
			height: 100%;
			align-items: center;
			font-size: 24rpx;
			display: flex;
			color: #999999;
			justify-content: space-between;

			.discount {
				color: #999999;
				height: 100%;
				display: flex;
				align-items: center;

			}

			.total {
				margin-left: 25rpx;
				color: #999999;
				display: flex;
				align-items: center;
			}

			.total_num {
				color: #F84835;
				font-size: 24rpx;
			}

			.decimal {
				color: #f23b17;
			}

		}

		.buy_btn {
			width: 152rpx;
			height: 62rpx;
			background-color: #F8321D;
			border-radius: 20px;
			text-align: center;
			line-height: 62rpx;
			font-size: 27rpx;
			color: #fff;
		}
	}
</style>
